<!-- 一个简易的懒加载组件，看到了它才加载 -->
<script setup lang="ts">
// 按需引入懒加载
import {useIntersectionObserver} from '@vueuse/core'
import {ref, watch} from 'vue'
const target = ref(null)
const emit = defineEmits(['enter'])
const props = defineProps(['id'])
// if (props.id) {
//     watch(props.id, () => {
//         console.log(props.id)
//     })
// }
// 停止观察                                                          
const {stop} = useIntersectionObserver(target, ([{isIntersecting}], observerElement) => {
    if (isIntersecting) {
        stop()
        // console.log(props.id,'stop')
        emit('enter')
    }
},
    // 配置交互为0就触发加载
    {
        threshold: 0
    })

</script>

<template>
    <div ref='target' />
</template>


